<template>
    <div>
        <el-menu style="width: 200px; height: 100vh" :default-active="path" class="el-menu-vertical-demo"
            @open="handleOpen" @close="handleClose" router background-color="#30333c" text-color="#fff">
            <el-menu-item index="/dashboard">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-iconfontcolor60"></use>
                </svg>
                <span>展示板</span>
            </el-menu-item>
            <el-sub-menu index="2" text-color="#fff">
                <template #title>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-gerenxinxi1"></use>
                    </svg>
                    <span>个人信息</span>
                </template>
                <el-menu-item index="/person" style="font-color: white">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiugaigerenxinxi"></use>
                    </svg>
                    <span>修改个人信息</span>
                </el-menu-item>
                <el-menu-item index="/password">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiugaimima1"></use>
                    </svg>
                    <span>修改密码</span>
                </el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/user" v-if="user.role != 2">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-yonghu"></use>
                </svg>
                <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="/venues">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-changguan"></use>
                </svg>
                <span>场馆管理</span>
            </el-menu-item>
            <el-menu-item index="/Notifications">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tongzhi1"></use>
                </svg>
                <span>通知管理</span>
            </el-menu-item>
            <el-menu-item index="/Reservations" v-if="user.role != 2">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-yuyue1"></use>
                </svg>
                <span>预约管理</span>
            </el-menu-item>
            <el-menu-item index="/MyReserations" v-if="user.role == 2">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-yuyue1 "></use>
                </svg>
                <span>我的预约</span>
            </el-menu-item>
            <el-menu-item index="/ReportData" v-if="user.role == 1">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-nav_icon_s_bgsj"></use>
                </svg>
                <span>报告数据管理</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
    
export default {
    name: 'Aside',
    components: {},
    created() {
        let userStr = sessionStorage.getItem('user') || '{}';
        this.user = JSON.parse(userStr);
    },
    data() {
        return {
            user: {},
            path: this.$route.path,
        };
    },
};
</script>

<style scoped>
.icon {
    width: 30px;
    height: 30px;
    padding-top: 5px;
    padding-right: 10px;
}
</style>
